<template>
  <el-container>
    <el-header
      ><el-input v-model="input" placeholder="Please input" clearable
    /></el-header>
    <el-main>
      <el-table
        ref="singleTableRef"
        :data="filterTableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
        @select="handleselect"
        @select-all="handleselectall"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="授权时间">
          <template #default="scope">{{ scope.row.datetime }}</template>
        </el-table-column>
        <el-table-column property="name" label="姓名" />
        <el-table-column property="license" label="车牌号" />
        <el-table-column
          property="address"
          label="车位地址"
          show-overflow-tooltip
        />
        <el-table-column property="money" label="金额" show-overflow-tooltip />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button
              size="small"
              type="info"
              @click="handleEdit(scope.$index, scope.row)"
              >付款</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >取消绑定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from "vue";
import { ElTable } from "element-plus";
import link from "@/api/link";
import apiUrl from "@/api/url";

const input = ref("");

let parkingtabledata: any = reactive({
  listdata: [],
});
onMounted(() => {
  link(apiUrl.parkingtabledata).then((resolve: any) => {
    console.log(resolve);
    parkingtabledata.listdata = resolve.data;
  });
});
const filterTableData = computed(() =>
  parkingtabledata.listdata.filter(
    (data) =>
      !input.value ||
      data.license.toLowerCase().includes(input.value.toLowerCase())
  )
);

interface User {
  datetime: string;
  name: string;
  address: string;
  license: string;
  money: string;
}

const currentRow = ref();
const singleTableRef = ref<InstanceType<typeof ElTable>>();

const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row);
  console.log(row);
};

const multipleSelection = ref<User[]>([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
console.log(multipleSelection, "multipleSelection");

const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val;
};

const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log("Delete", index, row);
  const list = parkingtabledata.listdata;
  console.log(list, "list");

  list.splice(index, 1);
  console.log(list.splice(index, 1), "list.splice(index, 1);");

  parkingtabledata.listdata = list;
};

const handleselect = (selection, row) => {
  console.log(selection, row, "selection, row");
};

const handleselectall = (selection) => {
  console.log(selection, "selection");
};
</script>

<style scoped lang="scss"></style>
